@extends("base.base")
{{--@include('User.header')--}}
@section("main")
    <style>
        .bottom-nav-user-active {
            color: #ba3b3f;
        }

        .header {
            width: 100vw;
            height: 20vh;
            background: #1e1e1e;
            color: #ffffff;
            line-height: 20vh;
        }

        .header-img {
            width: 30vw;
        }

        .header-img img {
            /*display: block;*/
            height: 12vh;
            margin: auto;
        }

        .header-name {
            width: 70vw;
        }

        .hd-div {
            height: 20vh;
            float: left;
        }

        .header-name-p {
            font-size: 2rem;
            line-height: 20vh;
            margin: 0;
        }

        .content {
            width: 100vw;
            min-height: 50vh;
            height: auto;
            overflow-x: hidden;
        }

        .content-ul {

        }

        .content-li {
            display: inline-block;
            float: left;
            width: 33.333333333vw;
            height: 15vh;
            background: #ffffff;
            border-right: 1px solid #d9d9d9;
            border-bottom: 1px solid #d9d9d9;
        }

        .cl-box {
            width: 33.333333333vw;
            height: 15vh;
            padding: 3vh 0 0 0;
        }

        .cl-box-img {
            overflow: hidden;
            width: 10vw;
            height: 11vw;
            margin: 0 auto;
        }

        .cl-box-img img {
            width: 10vw;
        }

        .cl-box-info {

        }
    </style>
    <main id="main" class="main">
        <div class="header">
            <div class="header-img hd-div">
                <img src="{{$user["headimgurl"]}}" alt="">
            </div>
            <div class="header-name hd-div">
                <p class="header-name-p">{{$user["nickname"]}}</p>
            </div>
        </div>

        <div class="content">
            <ul class="content-ul">
                <a href="/user/address/list">
                    <li class="content-li location">
                    <div class="cl-box">
                        <div class="cl-box-img">
                            <img src="{{asset(env("CDN_HOST")."/public/img/user/location_light.png")}}">
                        </div>
                        <div class="cl-box-info">
                            地址管理
                        </div>
                    </div>
                    </li>
                </a>
                <a href="/user/balance">
                    <li class="content-li">
                        <div class="cl-box">
                            <div class="cl-box-img">
                                <img src="{{asset(env("CDN_HOST")."/public/img/user/news_light.png")}}">
                            </div>
                            <div class="cl-box-info">
                                余额
                            </div>
                        </div>
                    </li>
                </a>
                <a href="/user/order/list">
                    <li class="content-li">
                        <div class="cl-box">
                            <div class="cl-box-img">
                                <img src="{{asset(env("CDN_HOST")."/public/img/user/sort_light.png")}}">
                            </div>
                            <div class="cl-box-info">
                                订单中心
                            </div>
                        </div>
                    </li>
                </a>
                <li class="content-li">
                    <div class="cl-box">
                        <div class="cl-box-img">
                            <img src="{{asset(env("CDN_HOST")."/public/img/user/emoji_light.png")}}">
                        </div>
                        <div class="cl-box-info">
                            帮助
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </main>
    <script>
        loading.hide()
    </script>
    {{--@include('User.footer')--}}
@endsection
@include('base.bottom_nav')